<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <h1>ObjectsMemento</h1>
    <h2>Saving and Restoring Object States</h2>
    <p>In this example, we're loading a BIM model from the file system, randomly hiding some objects, saving object
        visibility states to a memento, hiding all objects, then restoring the memento, which restores the object
        visibilities to their original random states.</p>
    <p>Object state mementos are useful when we want to build "rese</p>
    <h3>Stats</h3>
    <ul>
        <li>
            <div id="time">Loading JavaScript modules...</div>
        </li>
    </ul>
    <h3>Components Used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
               target="_other">XKTLoaderPlugin</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/mementos/ObjectsMemento.js~ObjectsMemento.html"
               target="_other">ObjectsMemento</a>
        </li>
    </ul>
    <h3>Resources</h3>
    <ul>
        <li>
            <a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274"
               target="_other">Model source</a>
        </li>
    </ul>
</div>
</body>
<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {Viewer, XKTLoaderPlugin, ObjectsMemento} from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer, arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.camera.eye = [-3.933, 2.855, 27.018];
    viewer.camera.look = [4.400, 3.724, 8.899];
    viewer.camera.up = [-0.018, 0.999, 0.039];

    //----------------------------------------------------------------------------------------------------------------------
    // Create a xeokit loader plugin, load a model, fit to view
    //----------------------------------------------------------------------------------------------------------------------

    const xktLoader = new XKTLoaderPlugin(viewer);

    var t0 = performance.now();

    document.getElementById("time").innerHTML = "Loading model...";

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
        edges: true
    });

    sceneModel.on("loaded", () => {
        var t1 = performance.now();
        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;

        // Hide some random objects

        const objects = viewer.scene.objects;
        const objectIds = Object.keys(objects);

        for (let i = 0, len = objectIds.length; i < len; i++) {

            const objectId = objectIds[i];
            const entity = objects[objectId];

            entity.visible = (Math.random() < 0.5);
            // entity.colorize = [Math.random(), Math.random(), Math.random()];
            // entity.opacity = Math.random();
            // entity.edges = (Math.random() < 0.5);
            // entity.xrayed = (Math.random() < 0.5);
            // entity.highlighted = (Math.random() < 0.5);
            // entity.selected = (Math.random() < 0.5);
            // entity.pickable = (Math.random() < 0.5);
        }

        // Save memento of all object states

        const objectsMemento = new ObjectsMemento();

        objectsMemento.saveObjects(viewer.scene);

        // Show all objects

        viewer.scene.setObjectsVisible(viewer.scene.objectIds, true);

        // Restore the objects states again, which involves hiding those randomly hidden objects again

        objectsMemento.restoreObjects(viewer.scene);
    });


</script>
</html>